<template>
  <div class="shoppingCart">
    <div class="cart-header">
      <span class="title"><i class="el-icon-shopping-cart-full"></i>我的购物车</span>
      <span class="tishi">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算！</span>
    </div>
    <div class="content">
      <el-table
          :data="ShoppingCart"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :height="height"
      >
        <el-table-column
            class="select-btn"
            type="selection"
            width="65">
        </el-table-column>
        <el-table-column
            label="商品信息"
        >
          <template slot-scope="scope">
            <router-link class="list-group-item" :to="`/purchasePage?curBookId=${scope.row.bookId}`">
              <img class="bookImg" style="height: 120px" :src="$store.state.baseImgUrl+scope.row.book.img">
              <span class="bookTitle">{{ scope.row.book.name }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
            label="单价"
            width="140">
          <template slot-scope="scope">
            ￥{{ scope.row.book.price|rounding }}元
          </template>
        </el-table-column>
        <el-table-column
            label="数量"
            width="245">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.count" :min="1" :max="scope.row.book.count" @change="updateCount(scope.row.id,scope.row.count)">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
            label="金额"
            width="145">
          <template slot-scope="scope">
            ￥{{ scope.row.count * scope.row.book.price|rounding }}元
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-popconfirm
                title="确定要删除吗？"
                @confirm="handleDelete(scope.row)"
            >
              <i slot="reference" class="el-icon-delete"></i>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="cart-footer">
      <router-link class="list-group-item" active-class="active" to="/paybook"><span class="continue"><i
          class="el-icon-d-arrow-right"></i>继续购物</span></router-link>
      |<span class="numDetails">共<span class="num">{{ ShoppingCart.length }}</span>件商品，已选中<span
        class="num">{{ multipleSelection.length }}</span>件</span>
      |
      <el-popconfirm title="确定要删除吗？" @confirm="handleDeletes()">
        <span slot="reference" class="delete">批量删除</span>
      </el-popconfirm>
      <div class="right-footer">
        <span class="total">合计:￥<span class="num">{{ total|rounding }}</span>元</span>
        <el-button class="button" @click="toOrder">去结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PayList",
  data() {
    return {
      userId: null,
      shoppingId: null,
      bookId: null,
      ShoppingCart: [],
      multipleSelection: [],
      selectIds: '',
    };
  },
  computed: {
    total() {
      var total = 0;
      this.multipleSelection.forEach(item => {
        total += item['book']['price'] * item['count'];
      });
      return total;
    },
    height(){
      if(this.ShoppingCart.length>10){
        return 1660
      }else {
        return null
      }
    }
  },
  methods: {
    getList() {
      this.getRequest('/cms/cart/list').then((resp) => {
        this.ShoppingCart = resp.data.list
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.selectIds = ''
    },
    handleDelete(row) {
      this.shoppingId = row.id
      this.getRequest('/cms/cart/delete/' + this.shoppingId).then((resp) => {
        if (resp.status === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.success('删除失败')
        }
      }).then(() => {
        this.getList()
      })
    },
    handleDeletes() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (i == this.multipleSelection.length - 1) {
          this.selectIds += "ids=" + this.multipleSelection[i].id
        } else {
          this.selectIds += "ids=" + this.multipleSelection[i].id + "&"
        }
      }
      this.getRequest('/cms/cart/deletes?' + this.selectIds).then((resp) => {
        if (resp.status === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.success('删除失败')
        }
      }).then(() => {
        this.getList()
      })
    },
    toOrder() {
      if(this.multipleSelection.length==0){
        const h = this.$createElement;
        this.$notify({
          message: h('i', { style: 'color: gray;font:500 17px 华文黑体;padding-left: 20px'}, '请选择您需要结算的宝贝！'),
          title:'温馨提示',
          offset: 100,
          duration:1000,
          type:"info",
        });
      }else {
        this.$router.push({
          path: '/topay',
          query: {
            selected: this.multipleSelection
          }
        })
      }
    },
    updateCount(id,count){
      this.getRequest('/cms/cart/update/' +id,{count:count}).then((resp) => {
        if (resp.status === 200) {
          return
        } else {
          this.$message.error('购物车出错了')
        }
      })
    }
  },
  created() {
    this.getRequest('/cms/cart/list').then((resp) => {
      this.ShoppingCart = resp.data.list
    })
  }
}
</script>

<style scoped>
.shoppingCart {
  padding-top: 50px;
  margin: auto;
  width: 100%;
}

.el-icon-shopping-cart-full {
  color: #f65050;
  padding-right: 5px;
}

.title {
  font: bold 35px 楷体;
  border: none;
}

.tishi {
  color: #555353;
}

.cart-header span {
  margin-right: 100px;
}

.cart-header {
  padding-bottom: 6px;
  border-bottom: 2px solid #f18080;
  margin-bottom: 30px;
}

.el-table {
  padding-left: 10px;
  padding-right: 25px;
}

.el-icon-delete {
  font-size: 25px;
}

.cart-footer {
  font-size: 17px;
  position: relative;
  top: 0px;
  left: -28px;
  width: 100%;
  margin: 30px;
  padding-top: 20px;
  border-top: 2px solid #f18080;
}

.bookTitle {
  font-size: 15px;
  color: black;
  position: absolute;
  top: 60px;
  left: 146px;
  margin-right: 10px;
  width: 65%;
}

.bookImg {
  padding-top: 10px;
  padding-left: 20px;
  position: relative;
  left: -41px;
}

.bookTitle[data-v-572f1196] {
  color: #585555;
  padding-right: 15px;
}

.bookTitle[data-v-572f1196]:hover{
  text-decoration: underline;
}

.numDetails {
  margin-left: 20px;
  margin-right: 20px;
}

.continue:hover {
  color: #f1595f;
  text-decoration: underline;
}

.num {
  color: #efa2a5;
  font-size: 21px;
  padding-left: 8px;
  padding-right: 8px;
}

.right-footer {
  position: absolute;
  right: 40px;
  top: 14px;
}

.total {
  margin-right: 30px;
}

.button {
  background: #ee9697;
  color: #fff0f0;
  font-size: 18px;
}

.paybtn {
  padding-left: 11px;
}

.button:hover {
  color: #f54148;
}

.el-icon-delete:hover {
  color: #f65050;
  cursor: pointer;
}

.delete {
  margin-left: 20px;
  font: 500 18px 黑体;
  color: gray;
  text-shadow: 1px 3px 5px #bfbdbd;
}

.delete:hover {
  color: #f1595f;
  text-shadow: 1px 3px 5px #ef8080;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #fdfbfb;
}
::v-deep .el-table th.el-table__cell>.cell{
  padding-left:14px;
}
::v-deep .el-table .el-table__cell{
  padding-left:20px;
}
.list-group-item{
  color: black;
  margin-right: 15px;
}
</style>